<template>
  <div class="goodmovie">
      <p>最受好评电影</p>
      <div class="goodmovielist" >
          <div v-for="(v,i) in arr" :key="i" @click="fun(i)">
              <goodmovies  :moviename="arr[i].name" :movieimg="arr[i].url" :xiangqingurl="arr[i].xiangqing" />
              
            </div>
          
      </div>
  </div>
</template>

<script>
import goodmovies from "com/goodmovies.vue"
import {getdata} from "@/api/getapi.js"
export default {
    components: {
      goodmovies
   
  },
   data() {
        return {
            arr:[]
        }
    },
   methods: {
        fun(i){
            this.$router.push({name:"Xiangqing",params:{xiangqing:this.arr[i]}})
        }
    },
    mounted() {
        getdata("/data/list").then((ok)=>{
            console.log(ok);
            this.arr=ok.data.arr
            // console.log(ok.data.arr[0].url)
            
        })
    },
}
</script>

<style scoped>
.goodmovie{
    padding: 0px 10px;
    margin-top: 160px;
    width: 100%;
}
    .goodmovielist{
        /* height: 142px; */
        /* background-color: aqua; */
        display: flex;
        overflow-x: auto;
        margin-top: 5px;
        text-align: center;
        font-size: 14px;
    }
    .goodmovie p{
        margin-left: 10px;
    }
</style>